<template>
  <div class="room">
    <el-container class="max-w">
      <el-header class="max-w">
        <div class="header-warrpper realCenter">
          <div class="header-left">
            <el-radio-group v-model="radioSelected">
              <el-radio-button label="1">全部</el-radio-button>
              <el-radio-button
                v-for="item in area"
                :key="item.id"
                :label="item.areaCode"
                >{{ item.areaName }}</el-radio-button
              >
            </el-radio-group>
          </div>
          <div class="header-right">
            <el-button @click="to()"> 区域管理 </el-button>
            <el-button @click="addAreaStatu = true"> 添加区域 </el-button>
          </div>
        </div>
        <el-divider></el-divider>
      </el-header>
    </el-container>
    <el-container class="max-w" v-if="area.length != 0">
      <el-main>
        <div class="main-header">
          <el-button @click="to()"> 房间管理 </el-button>
          <el-button
            v-show="radioSelected != 1"
            @click="openDialogRoom(true, '添加房间')"
          >
            添加房间
          </el-button>
        </div>
        <el-divider></el-divider>
        <div class="main-content">
          <el-row :gutter="30">
            <el-col
              class="roomItem"
              v-for="item in rooms"
              :key="item.id"
              :span="4"
            >
              <div
                class="warpprt"
                v-bind:class="{
                  disabled: item.roomStatus == 0,
                  selected: item.roomStatus == 2,
                }"
              >
                <div class="header realCenter">
                  <div class="text">
                    <p>{{ item.roomName }}</p>
                    <p>({{ item.roomNum }})</p>
                  </div>
                </div>
                <div class="footer realCenter">
                  {{ roomType(item.roomStatus) }}
                </div>
                <div class="edit-room-warpper">
                  <div class="edit-container realCenter">
                    <el-button
                      type="primary"
                      class="el-icon-edit"
                      @click="openDialogRoom(true, '编辑房间', item)"
                      >编辑</el-button
                    >
                    <el-button
                      type="danger"
                      class="el-icon-delete"
                      @click="delSelected = item"
                      >删除</el-button
                    >
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-main>
    </el-container>

    <el-dialog title="添加区域" :visible.sync="addAreaStatu" width="30%">
      <el-form
        ref="area"
        :model="areaFrom"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="区域名称" prop="area">
          <el-input
            v-model="areaFrom.areaName"
            placeholder="区域名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="区域代码" prop="area">
          <el-input
            v-model="areaFrom.areaCode"
            placeholder="区域代码 例如：A区就填A"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addAreaStatu = false">取 消</el-button>
        <el-button type="primary" @click="addrArea()">添 加</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="DialogRoom.title"
      :visible.sync="DialogRoom.Statu"
      width="30%"
    >
      <el-form
        ref="room"
        :model="roomFrom"
        label-width="70px"
        class="demo-ruleForm"
      >
        <el-form-item label="房间名称" prop="area">
          <el-input
            v-model="roomFrom.roomName"
            placeholder="房间名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="房间号" prop="area">
          <el-input placeholder="请输入内容" v-model="roomFrom.roomNum">
            <!-- <template slot="prepend">{{ `${radioSelected}-` }}</template> -->
          </el-input>
        </el-form-item>
        <el-form-item label="房间类型" prop="area">
          <el-select v-model="roomFrom.roomType">
            <el-option label="VIP" :value="1"></el-option>
            <el-option label="普通房间" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间状态" prop="area">
          <el-select v-model="roomFrom.roomStatus">
            <el-option label="停用" :value="0"></el-option>
            <el-option label="空闲" :value="1"></el-option>
            <el-option label="使用中" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogRoom.Statu = false">取 消</el-button>
        <el-button type="primary" @click="addrRoom(DialogRoom.title)"
          >确 认</el-button
        >
      </span>
    </el-dialog>

    <!-- delect -->
    <el-dialog title="警告" :visible.sync="delSelected" width="30%">
      <span>确定删除{{ delSelected ? delSelected.roomNum : "" }}号房吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delSelected = null">取 消</el-button>
        <el-button
          type="primary"
          @click="deleteRoom(delSelected ? delSelected.id : null)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      delSelected: null,
      selected: null,
      radioSelected: "1",
      areaFrom: {
        areaName: "",
        areaCode: "",
      },
      roomFrom: {
        roomName: "",
        roomNum: "",
        roomType: 1,
        roomStatus: 0,
      },
      addAreaStatu: false,
      DialogRoom: {
        Statu: false,
        title: "添加房间",
      },
      area: [],
      rooms: [],
    };
  },
  watch: {
    radioSelected(val) {
      this.initData();
    },
  },
  mounted() {
    this.initData();
  },
  computed: {},
  methods: {
    async initData() {
      this.delSelected = null;
      let area = await this.http.post("/room/getAreaList", { query: {} });
      this.area = area.error ? [] : area.result;
      if (this.area.length != 0) {
        let rom = await this.http.post("/room/getRoomList", {
          roomNum: this.radioSelected,
        });
        this.rooms = rom.error ? [] : rom.result;
      }
    },
    async addrArea() {
      let req = {
        ...this.areaFrom,
      };
      let res = await this.http.post("/room/addArea", req);
      if (!res.error) this.message("添加成功", "success");
      else this.message("添加失败", "error");
      this.addAreaStatu = false;
      this.initData();
    },
    async addrRoom(name) {
      if (name == "添加房间") {
        let req = {
          ...this.roomFrom,
        };
        req.roomNum = `${this.radioSelected}-${req.roomNum}`;
        let res = await this.http.post("/room/addRoom", req);
        if (!res.error) this.message("添加成功", "success");
        else this.message("添加失败", "error");
        this.DialogRoom.Statu = false;
        this.initData();
      } else {
        let req = {
          ...this.roomFrom,
        };
        let res = await this.http.post("/room/updateRoom", req);
        if (!res.error) this.message("修改成功", "success");
        else this.message("修改失败", "error");
        this.DialogRoom.Statu = false;
        this.initData();
      }
    },
    roomType(type) {
      console.log(type);
      switch (type) {
        case 0:
          return "停用";
          break;
        case 1:
          return "空闲";
          break;
        case 2:
          return "使用中";
          break;
        default:
          return "未知错误";
          break;
      }
    },
    async deleteRoom(id) {
      if (!id) {
        this.eui.Message({ message: "请选择房间" });
        return false;
      }
      let type, msg;
      let res = await this.http.get("/room/deleteRoom?roomId=" + id);
      if (!res.error) (type = "success"), (msg = "删除成功"), this.initData();
      else (type = "error"), (msg = "删除失败");
      this.eui.Message({
        message: msg,
        type: type,
      });
      this.selected = null;
      this.getList();
    },
    openDialogRoom(statu, title, obj) {
      let room = {
        ...obj,
      };
      this.roomFrom = room
        ? room
        : { roomName: "", roomNum: "", roomType: 1, roomStatus: 0 };
      this.DialogRoom.Statu = statu;
      this.DialogRoom.title = title;
    },
    message(smg, type) {
      this.eui.Message({
        message: smg,
        type: type,
        duration: 5 * 1000,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.room {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
.el-card__body {
  padding: none;
}
.roomItem {
  margin-bottom: 30px;

  .warpprt {
    height: 160px;
    display: flex;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    align-items: center;
    flex-direction: column;
    border: 1px solid #888;
    .header {
      height: 80px;
      width: 100%;
      text-align: center;
      background: aliceblue;
    }
    &.selected {
      border: 1px solid rgb(55, 88, 255);
      .header {
        height: 80px;
        width: 100%;
        text-align: center;
        background: rgb(55, 88, 255);
        color: aliceblue;
      }
    }
    &.disabled {
      user-select: none;
      border: 1px solid rgb(145, 145, 146);
      color: #333;
      .header {
        background: rgb(145, 145, 146);
      }
    }
    &:hover {
      cursor: pointer;
      .edit-room-warpper {
        display: block;
      }
    }
    .edit-room-warpper {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      background: #00000050;
      display: none;
      .edit-container {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.footer {
  height: 80px;
}
.realCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-warrpper {
  width: 100%;
  justify-content: space-between;
}
</style>